<template>
  <div :class="['hcard', `hcard-${size}`, `color-${type}`, `hcard--${align}`]">
    <div class="hcard-icon" :style="{width: `${imgW}px`}" v-if="url">
      <img :src="url" width="100%" alt="">
    </div>
    <div class="hcard-text" v-html="content">

    </div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'HCard',
  props: {
    size: {
      type: String,
      default: 'default'
    },
    url: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'default'
    },
    align: {
      type: String,
      default: 'left'
    },
    content: {
      type: String,
      default: ''
    },
    imgW: {
      type: Number,
      default: 36
    }
  }
};
</script>
<style lang="less" scoped>
.hcard {
  background: #FFFFFF;
  border-radius: 10px;
  // display: inline-block;
  align-items: center;
  display: flex;
  cursor: pointer;
  transition: all .4s;
  &.hcard--center {
    justify-content: center;
    .hcard-text {
      flex: none !important;
    }
  }
  &:hover {
    box-shadow: 0 0 12px rgba(24, 144, 255, 0.3);
    transform: translate3d(0,-2px,0);
  }
  &.hcard-default {
    padding: 20px 28px;
    padding-right: 10px;
    min-height: 66px;
    font-size: 14px;
    .hcard-icon {
      width: 36px;
      margin-right: 13px;
    }
    .hcard-text {
      text-align: left;
      flex:1
    }
  }
  &.hcard-large {
    padding: 24px 40px;
    padding-right: 12px;
    min-height: 126px;
    font-size: 20px;
    .hcard-icon {
      width: 73px;
      // margin-right: 23px;
    }
  }

  @media (max-width: 1600px) {
    &.hcard-large {
      font-size: 16px;
      // padding: 24px 20px;
      height: 110px;
      min-height: 110px;
      box-sizing: border-box;
      .hcard-icon {
        transform: scale(0.8);
      }
    }
  }

  &.color-default {
    color: #1F3B8A;
    background: #fff;
  }
  &.color-primary {
    background: #1F3B8A;
    color: #fff;
  }
  &.color-success {
    color: #1F3B8A;
    background: #E2EECB;
  }
  &.color-info {
    color: #1F3B8A;
    background: #CCE0F7;
  }
  .hcard-text {
    text-align: center;
    flex:1
  }
}
</style>
